<template>
  <div class="page orderList-page">
    <van-notice-bar left-icon="volume-o" text="需上传证件，请预先准备!" />
   <div v-if="pageLoading" class="data-tip">数据加载中...</div>
    <div v-else>
      <div v-if="showOrders.length">
        <div class="menu" v-for="item in showOrders " :key="item.id">
          <div class="list">
            <div class="item-info" v-for="(value, key, index) in item" :key="key" v-if="key == 'managerName' || key == 'managerCode' || key == 'reserveDate' || key == 'reserveTime' || key == 'reserveStatus'">
              <img class="icon-style" :src="'/remotebank/h5/static/orderList/icon-'+key+'.svg'" />
              <div class="item-txt">{{ keyMap[key] }}：{{ value }}</div>
            </div>
          </div>
          <div class="btn-wrap enter-btn">
            <van-button
                class="btn-style login-btn"
                type="info"
                :loading="loading"
                :data-id="item.id"
                @click="submitCardInfo"
                v-if="item.reserveStatus !== '已取消' && item.reserveStatus !== '已结束'"
                custom-class="btn-style login-btn"
                :disabled="!(item.reserveStatus === '进行中')"
            >进入</van-button>
          </div>
        </div>
      </div>
      <div v-else class="no-wrap">
        <img class="no-order" src="../assets/orderList/no-order.svg" />
        <div class="no-tip">您暂无预约记录！</div>
      </div>
    </div>
    <van-action-sheet
        v-model="showsheet"
        :actions="actions"
        @select="onSelect"
        cancel-text="取消"
        description="请选择上传证件类型"
        close-on-click-action
    />
  </div>
</template>

<script>

import { mapState } from "vuex"
import { Toast } from 'vant';
import { now } from "@/utils/Common"

const keyMap = {
  managerName: '客户经理',
  managerCode: '客户经理代码',
  reserveDate: '预约日期',
  reserveTime: '预约时间',
  reserveStatus: '预约状态'
};

export default {
  name: "orderList",
  data() {
    return {
      meetingNum: "",
      showOrders: [], // 显示到页面的数据
      orderList: [], // 实际从接口拿到的数据
      keyMap,
      pageLoading: true, // 加载预约数据
      loading: false, // 按钮状态
      timeref: null, // 轮询数据时间,
      actions: [
        { name: '二代身份证', },
        { name: '其他', },
      ],
      showsheet: false,

    }
  },
  computed: {
    ...mapState({
      globalData: state => state.globalData
    })
  },
  async mounted () {
    this.getOrderList();
  },
  beforeDestroy () {
    console.log('onHideonHide');
    clearInterval(this.timeref);
    this.timeref = null;
  },
  activated() {
    console.log("进入，当前页面", this.timeref)
    this.getOrderList();
  },
  deactivated() {
    console.log("清除，当前页面", this.timeref)
    clearInterval(this.timeref);
    this.timeref = null;
  },
  methods: {
    getOrderList () {
      const { bankCode, infor } = this.globalData;
      this.getShowOrders(infor);
      this.timeref = setInterval(()=>{
        this.refOrderList();
      }, 10000)
    },
    getShowOrders (d) {
      let result = [];
      d=[d]
      d.length && d.map(i => {
        const a = i.reserveStartTime > '12:00' ? 'p' : 'a';
        const p = i.reserveEndTime > '12:00' ? 'p' : 'a';
        const statusMap = {
          '0': '未开始',
          '1': '进行中',
          '2': '已完成',
          '3': '已结束',
          '4': '已取消',
          '5': '轮询中'
        }
        result.push({
          id: i.id,
          startTime: i.reserveStartTime,
          managerName: i.managerName,
          managerCode: i.managerCode,
          reserveDate: i.reserveDate,
          reserveTime: `${i.reserveStartTime}~${i.reserveEndTime}`,
          // reserveTime: `${i.reserveStartTime}${a}m~${i.reserveEndTime}${p}m`,
          reserveStatus: statusMap[i.reserveStatus] || i.reserveStatus
        });
      });
      console.log(result);
      this.showOrders = result;
      console.log(this.showOrders);
      this.pageLoading = false;
    },
    submitCardInfo (e) {
      this.showsheet = true;
    },
    onSelect(item) {
      this.showsheet = false;
      console.log("点击了 " + item.name);
      this.$router.push(`/wechat-orc?papersType=${item.name}`)
    },
    async refOrderList () {
      const res = await this.$getAPIs(this, this.globalData.infor, "预约刷新","apis", "refOrderList")
      if (!res) return false;
      const resCon = res.content || {}
      this.$store.commit("UPDATE_GLOBAL", {key: "infor", val:  resCon});
      this.getShowOrders(resCon);
    },
  }
}
</script>

<style scoped>
.orderList-page {
  background: #eee;
  overflow: scroll;
  border-top: 1px solid #F7F7FA;
  height: 100%;
}
uni-button[disabled]{
  background: #000 !important;
  opacity: 0.4 !important;
  color: #fff;
}
.menu .list{
  background: #fff;
  padding: 14px 18px;
  box-sizing: border-box;
}
.item-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.item-txt {
  font-size: 14px;
  color: #999;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 3px;
}

.orderList-page .enter-btn {
  padding: 0 18px 40px;
  box-sizing: border-box;
  margin-top: 20px;
}

.icon-style {
  width: 17px;
  height: 17px;
}

.no-wrap {
  text-align: center;
  padding-top: 50px;
}
.no-order {
  width: 150px;
  height: 111px;
  margin-bottom: 30px;
}
.no-tip {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
}

.data-tip {
  text-align: center;
  padding-top: 15px;
}

</style>